<template>
  <div class="user_avatar">
    <!-- 用户头像组件 -->
    <el-avatar v-bind="customizedAttrs">
      <img src="../assets/img/default-avatar.png" />
    </el-avatar>
    <!-- 皇冠图标 -->
    <span
      v-if="showHuangguan"
      class="iconfont icon-huangguan avatar_tag huangguan"
    ></span>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
import { dealImgUrl } from "../utils/common";

export default {
  name: "UserAvatar",
  // 透传
  inheritAttrs: false,
  props: {
    src: {
      type: String,
      default: "",
    },
    // 皇冠图标
    showHuangguan: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const store = useStore();
    // ------------------ 通用属性 end ----------------------

    // 计算属性
    const userInfo = computed(() => store.state.user.userInfo);
    const customizedAttrs = computed(() => {
      return {
        src: dealImgUrl(props.src) || store.state.defaultAvatar,
        ...context.attrs,
      };
    });

    return {
      userInfo,
      customizedAttrs,
    };
  },
};
</script>

<style lang="less" scoped>
.user_avatar {
  position: relative;
  display: inline-flex;
  :deep(.el-avatar) {
    position: relative;
    display: inline-flex;
    font-size: 0;
    color: transparent;
    border: 0;
    outline: 0;
    img {
      border: 0;
      outline: 0;
    }
  }

  .avatar_tag {
    position: absolute;
    z-index: 10;
    left: -3px;
    top: -12px;
    font-size: 20px;
  }

  .huangguan {
    color: rgb(189, 152, 61);
  }
}
</style>
